// 修改导入方式，使用命名导入
import {CircleNode, CircleNodeModel, h} from "@logicflow/core";
import startImg from '@/assets/wf-icon/start.png'

class CustomCircleView extends CircleNode {
    // 自定义图标形状
    // 自定义图标形状，绘制一个三角形作为开始图标
    getIconShape() {
        const {model} = this.props;
        const {x, y} = model;
        const iconSize = 20; // 图标大小

        return h('image', {
            x: x - iconSize / 2,
            y: y - iconSize / 2,
            width: iconSize,
            height: iconSize,
            href: startImg,
            // 添加 crossOrigin 属性，避免跨域问题
            crossOrigin: 'anonymous'
        });
    }

    // 自定义节点外观
    getShape() {
        const {model} = this.props;
        const {x, y, r} = model;
        const style = model.getNodeStyle();
        return h('g', {}, [
            h('circle', {
                ...style,
                cx: x,
                cy: y,
                r
            }),
            this.getIconShape()
        ]);
    }
}

class CustomCircleModel extends CircleNodeModel {
    constructor(data, graphModel) {
        // 确保 data.text 存在，若不存在则设为空字符串
        const textValue = typeof data.text === 'object' ? data.text.value : data.text || '';
        data.text = {
            // 自定义文本坐标：向下移动 40px
            value: textValue,
            x: data.x,
            y: data.y + 40
        };
        // 自定义业务需要的属性字段
        data.properties = {
            // 业务类型标识
            bizType: 'start',
            // 当前审批人
            approvers: [],
            // 审批方式 (0=拒绝、1:=同意、2=会签、3=通知(告知) 4 = 自动通过 、5=等待审批
            approveType: 5,
            //  表单只读字段列表
            readonlyFields: [],
            //表单可编辑字段列表
            editableFields: [],
            //  表单隐藏字段列表
            hiddenFields: [],

            // 自定义业务数据
            ...data.properties // 保留外部传入的属性
        };

        // 只传递 data 参数
        super(data, graphModel);

        // 半径：控制圆形大小
        this.r = 30;
        // 添加校验规则：开始节点只能作为源节点连接其他节点
        const noIncomingEdges = {
            message: '开始节点不能被其他节点连接',
            validate: (sourceNode, targetNode) => {
                // 当作为目标节点时返回false，禁止连接
                return targetNode.id !== this.id;
            }
        };
        // 开始节点不能被其他节点连接
        this.targetRules.push(noIncomingEdges);
    }
}

export default {
    type: 'custom-start',
    view: CustomCircleView,
    model: CustomCircleModel,
};